<template>
  <div class="login-wrap">
    <div class="login-content">
      <div class="login-content-left">
        <div v-if="actionType == actionList.LOGIN" class="logo-wrapper">
          <!-- <img src="../../assets/images/logo-login.png" alt="" class="logo-img"> -->
          综合计费管理云平台
        </div>
        <!-- <img src="../../assets/images/login_bg.png" alt=""> -->
      </div>
      <div class="login-content-right">
        <div class="right-content">
          <LoginForm v-if="actionType == actionList.LOGIN" />
          <RegistryForm v-else @changeType="changeActionType" />
          <!-- <div v-show="actionType == actionList.LOGIN" class="other-actions enter-x">
            <el-button link @click="changeActionType(actionList.REGISTRY)">注册</el-button>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import LoginForm from './LoginForm.vue'
import RegistryForm from './RegistryForm.vue'
import { actionList } from './const';
import { removeOriginToken } from '@/api/user';
import { getToken } from '@/utils/user';

const actionType = ref(actionList.LOGIN)

const changeActionType = (type: actionList) => {
  actionType.value = type;
}

/** created */
if (getToken()) {
  removeOriginToken();
}
// localStorage.clear();
/** # created */
</script>

<style lang="scss" scoped>
$bg_color: #fff;
$font_color: #666;

/* ui rest */
:deep(.el-form-item__content) {
  position: relative;
}

:deep(.el-input-group--prepend>.el-input__inner:hover) {
  box-shadow: none;
}

:deep(.el-input-group--prepend>.el-input__inner:focus) {
  box-shadow: none;
}

:deep(.el-form-item.is-error .el-input__inner) {
  box-shadow: none;
}

:deep(.el-input input) {
  background: transparent;
  border: 0px;
  -webkit-appearance: none;
  border-radius: 0px;
  box-shadow: none;
  font-size: 12px;
}

.login-wrap {
  height: 100%;
  position: relative;
  background: $bg_color;
}

.login-content {
  display: flex;
  width: 100%;
  height: 100%;
  justify-items: stretch;
  background: url(@/assets/images/login-bg.png) center no-repeat;
  background-size: cover;
  .login-content-left {
    width: 50%;
    // background: url(@/assets/images/login_bg.png) center no-repeat;
    // background-size: cover;
    position: relative;
  }
  .logo-wrapper {
    font-weight: bold;
    font-size: 32px;
    color: #00AA86;
    line-height: 23px;
    position: absolute;
    top: 8vh;
    left: 12vw;
    display: flex;
    align-items: center;
    .logo-img {
      margin-right: 24px;
      width: 80px;
    }
  }
  .login-content-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .right-content {
      width: 560px;
      padding: 40px;
      .other-actions {
        text-align: right;
      }
    }
  }
}

.login-tips {
  font-size: 12px;
  line-height: 20px;
  color: #ddd;
}

:deep(.el-divider__text) {
  background: $bg_color;
  color: $font_color;
}

:deep(.el-radio__label) {
  color: $font_color;
}

:deep(.el-checkbox__label) {
  color: $font_color;
}

</style>
